<script lang="ts" setup>
import { ref, reactive } from 'vue'

const bgBind = "https://shq.qdjqy.cn/profile/0911/cardBag/bg_bind.png"
const bgNeedRegister = "https://shq.qdjqy.cn/profile/0911/cardBag/bg_need_register.png"
const bgPast = "https://shq.qdjqy.cn/profile/0911/cardBag/bg_past.png"
const iconPast = "https://shq.qdjqy.cn/profile/0911/cardBag/icon_past.png"

definePage({
  style: {
    navigationStyle: 'custom'
  },
})

function handleClickLeft() {
  uni.navigateBack({
    delta: 1
  })
}

const tab = ref<number>(0)
const tabsWithBadge = ref([
  { title: '全部' },
  { title: '待激活' },
  { title: '待绑定' },
  { title: '已绑定' },
  { title: '已到期' }
])

function handleChange(event: any) {
  tab.value = event.index;
}

interface Coupon {
  id: number,
  staus: string,
  title: string,
  validTime: string,
  userName?: string,
  cardNo?: string,
  phone?: string
}

const couponList = reactive<Coupon[]>([
  { id: 1, staus: 'bind', title: '单人卡', validTime: '2020.08.05', userName: '张三', cardNo: '370234188912234321', phone: '13812345678' },
  { id: 2, staus: 'needBind', title: '箱包品类', validTime: '2020.08.05', userName: '',cardNo: '', phone: '' },
  { id: 3, staus: 'needRegister', title: '服饰类', validTime: '2020.08.05', userName: '',cardNo: '', phone: '' },
  { id: 4, staus: 'past', title: '电子数码类', validTime: '2020.08.05', userName: '',cardNo: '', phone: '' },
  { id: 5, staus: 'bind', title: '无门槛', validTime: '2020.08.05', userName: '李四', cardNo: '370234188912230000', phone: '13812345678' },
  { id: 6, staus: 'needRegister', title: '无门槛', validTime: '2020.08.05', userName: '',cardNo: '', phone: '' },
])

const couponNeedRegister = computed(() => {
  return (statu:string) => {
    return (statu === 'needRegister' && tab.value === 1) || (statu === 'needRegister' && tab.value === 0)
  }
})

const couponNeedBind = computed(() => {
  return (statu:string) => {
    return (statu === 'needBind' && tab.value === 2) || (statu === 'needBind' && tab.value === 0)
  }
})

const couponBind = computed(() => {
  return (statu:string) => {
    return (statu === 'bind' && tab.value === 3) || (statu === 'bind' && tab.value === 0)
  }
})

const couponPast = computed(() => {
  return (statu:string) => {
    return (statu === 'past' && tab.value === 4) || (statu === 'past' && tab.value === 0)
  }
})
</script>

<template>
  <view class="scan-container">
    <wd-navbar left-text="我的卡包" left-arrow @click-left="handleClickLeft" 
      custom-style="background-color: transparent !important;" safeAreaInsetTop></wd-navbar>

    <wd-tabs v-model="tab" @change="handleChange">
      <wd-tab v-for="(item, index) in tabsWithBadge" :key="index" :title="`${item.title}`">
        <view class="coupon-content" v-for="(item, index) in couponList" :key="index">
          
          <view class="flex li" v-if="couponBind(item['staus'])">
            <image class="bgImage" :src="bgBind" mode="aspectFill"></image>
            <view class="date">有效期至：2020.08.05</view>
            <view class="conent flex">
              <view class="title">担人卡</view>
              <view class="statu">已绑定</view>
            </view>
            <view class="bottom flex">
              <view class="info">
                <span class="name">张三</span>
                <span class="card">37021419960805353</span>
              </view>
              <view class="phone">138123456789</view>
            </view>
          </view>

          <view class="flex li" v-if="couponNeedBind(item['staus'])">
            <image class="bgImage" :src="bgBind" mode="aspectFill"></image>
            <view class="date">有效期至：2020.08.05</view>
            <view class="conent flex">
              <view class="title">担人卡</view>
              <view class="statu-plain">待绑定</view>
            </view>
            <wd-button custom-class="btn" size="small">去绑定</wd-button>
          </view>

          <view class="flex li" v-if="couponNeedRegister(item['staus'])">
            <image class="bgImage" :src="bgNeedRegister" mode="aspectFill"></image>
            <view class="conent flex">
              <view class="title">担人卡</view>
              <view class="statu-plain">待激活</view>
            </view>
            <wd-button custom-class="btn" size="small">去激活</wd-button>
          </view>


          <view class="flex li" v-if="couponPast(item['staus'])">
            <image class="bgImage" :src="bgPast" mode="aspectFill"></image>
            <view class="date">有效期至：2020.08.05</view>
            <view class="conent flex">
              <view class="title">担人卡</view>
            </view>            
            <image class="icon" :src="iconPast" mode="aspectFill"></image>            
            <wd-button custom-class="btn" size="small">去续费</wd-button>
          </view>

        </view>
      </wd-tab>
    </wd-tabs>
    
  </view>
</template>

<style lang="scss" scoped>
.coupon-content {
  width: 750rpx;

  & .li {
    width: 690rpx;
    height: 190rpx;
    margin: 20rpx 30rpx;
    position: relative;
    overflow: hidden;
    & .bgImage {
      width: 690rpx;
      height: 190rpx;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
    }
  
    & .date {
      position: absolute;
      top: 15rpx;
      right: 20rpx;
      color: #6D2E19;
      font-size: 24rpx;
      font-weight: 500;
      z-index: 2;
    }

    & .conent { 
      position: absolute;
      top: 65rpx;
      left: 40rpx;
      z-index: 2;
      width: 400rpx;
      height: 60rpx;
      & .title {
        color: #6D2E19;
        font-size: 40rpx;
        font-weight: 900;
        line-height: 60rpx;
      }
      & .statu {
        color: #fff;
        background-color: #6D2E19;
        font-size: 22rpx;
        padding: 5rpx 25rpx;
        border-radius: 50rpx;
        height: 40rpx;
        line-height: 40rpx;
        margin-left: 20rpx;
        margin-top: 10rpx;
      }
      & .statu-plain {
        color: #6D2E19;
        border: 1rpx solid #6D2E19;
        font-size: 22rpx;
        padding: 5rpx 25rpx;
        border-radius: 50rpx;
        height: 40rpx;
        line-height: 40rpx;
        margin-left: 20rpx;
        margin-top: 10rpx;
      }

    }
    & .bottom {
      position: absolute;
      bottom: 15rpx;
      left: 40rpx;
      z-index: 2;
      width: 600rpx;
      height: 40rpx;
      border-radius: 20rpx;
      font-size: 24rpx;
      color: #6D2E19;
      justify-content: space-between;
      line-height: 40rpx;
      & .info { 
        & .card {
          margin-left: 50rpx;
        }
      }
    }

    :deep() {
      .btn {
        position: absolute;
        top: 70rpx;
        right: 40rpx;
        z-index: 3;
        background-color: #6D2E19;
        color: #fff;
      }
    }
    & .icon {
      width: 200rpx;
      height: 200rpx;
      position: absolute;
      bottom: -20rpx;
      right: 120rpx;
      z-index: 2;
    }
  }
  & .opacity {
    opacity: 0.7;
  }
}
.color-a {
  color: #aaa;
}
</style>

